<template>
  <div class="t">
    <el-tag
      v-for="(item,i) in tags"
      :key="i"
      :closable="item.name!='home' ? true : false "
      :effect="$route.name === item.name ? 'dark' : 'plain' " 
      @click="changeMenu(item)"
      @close="closeTag(item,i)"
      size="mini"
      >
      {{ item.label }}
    </el-tag>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
  export default {
    computed: {
      ...mapState({
        tags: item=>item.tab.tabList 
      }) 
    },
    methods:{
      ...mapMutations(["close"]),
      // 标签跳转
      changeMenu(item){
        if(item.name===this.$route.name){
          return
        }
        this.$router.push({name:item.name})
      },
      // 标签删除功能
      closeTag(item,i){
        this.close(item)
        let length=this.tags.length
        if(item.name!==this.$route.name){
          return
        }
        if(i===length){
          this.$router.push({name:this.tags[i-1].name})
        }else{
          this.$router.push({name:this.tags[i].name})
        }
      }
    },
  }
</script>

<style lang="less" >
  .t{
    margin-bottom:20px;
    .el-tag{
      margin-right:15px;
    }
  }
</style>